<template>
  <div class="orderManagementSystem">
    <div class="searchBar">
      <div class="searchForm">
        <el-input
          style="width: 160px;margin-right: 14px;"
          placeholder="请输入访客姓名"
          v-model="searchParams.userName">
        </el-input>
        <el-input
          style="width: 160px;margin-right: 14px;"
          placeholder="请输入手机号码"
          v-model="searchParams.phone">
        </el-input>
        <el-select
          style="width: 160px;margin-right: 14px;"
          clearable
          v-model="searchParams.state">
          <el-option label="未审批" value="0"/>
          <el-option label="已通过" value="1"/>
          <el-option label="未通过" value="2"/>
        </el-select>
        <el-date-picker
          style="width: 360px"
          v-model="searchParams.dateRange"
          type="daterange"
          format="yyyy-MM-dd 00:00:00"
          value-format="yyyy-MM-dd 00:00:00"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" @click="handleSearch">刷新</el-button>
      </div>
      <div class="operateForm">
        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>
    </div>
    <el-table
      stripe
      height="100%"
      size="mini"
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="identity" label="身份证号码"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column prop="unit" label="访客单位"></el-table-column>
      <el-table-column prop="information" label="来访事由"></el-table-column>
      <el-table-column prop="intervieweeName" label="被访人员姓名"></el-table-column>

      <el-table-column prop="area" label="访问区域"></el-table-column>
      <el-table-column prop="reception" label="接待部"></el-table-column>
      <el-table-column prop="accompany" label="现场陪同人员"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.state === '1'">已通过</el-tag>
          <el-tag type="info" v-else>拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="身份证oss地址">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            fit="contain"
            :src="scope.row.identityOss">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="createAt" label="创建时间"></el-table-column>
    </el-table>
    <div class="pageContain">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getOrderList_, exportData } from "@/api/orderManagement";

export default {
  data() {
    return {
      searchParams: {
        pageNum: 1,
        pageSize: 100,

        userName: "",
        phone: "",
        state: "",
        startTime: "",
        endTime: "",
        dateRange: ""
      },
      tableData: [],
      total: 0,
    }
  },
  created() {
    this.initTable();
  },
  methods: {
    initTable() {
      const params = {
        ...this.searchParams,
        startTime: this.searchParams.dateRange ? this.searchParams.dateRange[0] : undefined,
        endTime: this.searchParams.dateRange ? this.searchParams.dateRange[1] : undefined,
      }
      getOrderList_(params).then(res => {
        const {total, rows} = res;
        this.tableData = rows;
        this.total = total;
      })
    },
    handleSearch() {
      this.initTable();
    },
    handleSizeChange(v) {
      this.searchParams.pageNum = 1;
      this.searchParams.pageSize = v;
      this.initTable();
    },
    handleCurrentChange(v) {
      this.searchParams.pageNum = v;
      this.initTable();
    },
    handleExport() {
      this.download('/system/data/importTemplate', {
        ...this.searchParams
      }, `job_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
<style lang="scss" scoped>
div.orderManagementSystem {

  div.searchBar {
    height: 36px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div.searchForm {
      display: flex;
      justify-content: start;
      align-items: center;

      div.name {
        width: 60px;
        margin-right: 5px;
        font-size: 14px;

        &:not(:first-child) {
          margin-left: 14px;
        }
      }

      .el-button {
        margin-left: 14px;
      }
    }

    div.operateForm {
      display: flex;
      justify-content: start;
      align-items: center;
    }
  }
}
</style>

